SUMMARY
Our assignment is to craft a vocabulary flashcard app prototype focusing on basic HTML and CSS terms. The emphasis was to be put on creating a strong design system, to utilize Character Styles and Components.
GOALS
I simply wanted to walk away feeling more confident in using the program XD. I aimed to understand Components and proper animation.
FLASHCARD DESIGN
I knew I wanted to approach this project from an anachronistic perspective. Since flash cards, and cards in general, have been around for a long time, I looked at the first cards and flash cards from the 1950s to the 1980s for inspiration. I decided that the recreation of library due date cards would provide an interesting template. This likely meant my project would not reflect the minimalism discussed in the description of the project.
LO-FI WIREFRAME
The ideation phase was quite enjoyable. Since I have a better understanding of navigation maps, it was easy to envision each idea clearly. My first idea would be the one I ultimately developed, the library card. I experimented with other systems of labeling, such as signs from the 1800s or medicine bottle labels from the same time period.
MED-FI WIREFRAME AND DESIGN SYSTEM
One of my favorite parts of any graphic design project is choosing the font. Though I had specified each font in the low-fi stage, you don't really know what is going to look like until you start to work out the finer points. I expected Courier to work well for the Definition and Examples, however, it turned out to be a little difficult to read. I chose the typeface Lekton, which drastically improved the readability. I used pictures from actual old library cards to choose the color palette for my app. I used different colors of ink to further enhance the feel of an item that had passed through many hands over the course of time. I also added ink layers to each part of the card and card holder. As a finishing esthetic touch, I added a wet paper layer on the 'book page'. I built a card holder in Illustrator that one might find on the front of a card catalog drawer. It is there that I was able to use the typeface Mistage. It had too many ink splatters to be considered legible in other locations of the app.
NAVIGATION MAP
I found this to be tedious. I had to start over a few times not because I had difficulty envisioning the process, but organizing it neatly and clearly.
APP PROTOTYPE BUILD
In the previous project, the dashboard build, I really did not understand the concept of components. I also struggled with the way XD works. I would have preferred to work on Figma and work out the kinks of it on the industry standard. I don't feel prepared to work on app development professionally. Once I was able to accurately label and use components, I had to figure out how to assign Transitions. I watched videos and asked several students for help. It was a cumbersome and time-consuming process.
PROTOTYPE
Building the prototype felt like a day that would never come, as I had combed over the build with a fine-tooth comb. There were still some errors that I had to double-check and correct. While the process took a few hours, it was easy to do and easy to look for errors.
FINAL WORK
The final work functions as I would like a flash card app to work. In a succession of hints, the example came before the definition. I was under the impression that the build was to be linear. I were able to, I would spend some time pulling wires from each definition listed on the HTML and CSS Library pages.
KNOWLEDGE GAINED
I am proud of myself for gaining a better understanding of Adobe XD and for being able to execute my design the way I had imagined it. I feel it would have been beneficial to have a project in conjunction with a Computer Science class. Then I would be able to experience how to prototype, communicate, and ultimately develop a working app in a safer environment than with an actual client. I feel the most important bit of information I learned was how to build in XD. Being able to do so made it much easier to understand how Illustrator elements would function once brought into XD.
